<script setup>
    import { computed, ref } from 'vue';
    import { useRoute,useRouter } from 'vue-router';
    import { useAllDataStore } from '@/stores';

    const store = useAllDataStore()
    const tags = computed(()=> store.state.tags)
    const route = useRoute()
    const router = useRouter()

    //建议给点击这里做一个hover属性
    const handleMenu = (tag)=> {
        router.push(tag.name)
        store.selectMenu(tag)
    }

    //关闭左上角小标签，与pinia联动
//tag：表示要关闭的标签对象，可能包含标签的信息，例如名称（name）等。
// index：表示当前标签在标签数组中的索引。
    const handleClose = (tag,index)=> {
        //通过pinia管理
        store.updateTags(tag)

        //如果点击的准备关闭的tag 不是对应的当前页面(这个有点难，回去再好好看看P30)，就直接关闭了
        if(tag.name !== route.name) return

        //关闭的是最后一个，就跳转到前面那一个组件
        if(index === store.state.tags.length){
            store.selectMenu(tags.value[index-1])
            router.push(tags.value[index-1].name)
        }
        // 如果不是最后一个标签，则选择关闭后剩下的标签（tags.value[index]），并将路由切换到该标签对应的页面。
        else{
            store.selectMenu(tags.value[index])
            router.push(tags.value[index].name)
        }

    }

</script>

<template>
    <div class="tags">
        <el-tag
        v-for="(tag,index) in tags"
        :key="tag.name"
        :closable="tag.name !== 'home'"
        :effect="route.name === tag.name ? 'dark' : 'plain'"
        @click="handleMenu(tag)"
        @close="handleClose(tag,index)"
    >
        {{ tag.label }}
        </el-tag>
    </div>
</template>

<style lang="css" scoped>
.tags{
    margin: 20px 0 0 20px;
}
.el-tag{
    margin-right: 10px;
}
</style>